<template>
  <div id="app">
    <h4 class="add">
      添加房源
      <span class="back"
        ><img src="../assets/icon/向左返回.svg" alt="" @click="back"
      /></span>
    </h4>
    <div class="mask">
      <ul>
        <li>
          <span>*</span>房源城市
          <el-cascader size="large" :options="option" v-model="selectedOptions">
          </el-cascader>
        </li>
        <li>
          <span>*</span>房源类型
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span>*</span>具体地址
          <el-input placeholder="请输入具体地址" v-model="input1" clearable>
          </el-input>
        </li>
        <li>
          <span>*</span>门牌号码
          <el-input placeholder="请输入门牌号" v-model="input2" clearable>
          </el-input>
        </li>

        <li>
          <span>*</span>租赁方式
          <el-radio-group v-model="radio1">
            <el-radio-button label="整租"></el-radio-button>
            <el-radio-button label="合租"></el-radio-button>
          </el-radio-group>
        </li>
      </ul>
      <el-button plain @click="open1"> 添加 </el-button>
    </div>
  </div>
</template>
 
 
 
<script>
import { regionData, CodeToText } from "element-china-area-data";
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
export default {
  computed: {
    ...mapState(["message"]),
  },
  data() {
    return {
      option: regionData,
      selectedOptions: [],
      options: [
        {
          value: "商品房",
          label: "商品房",
        },
        {
          value: "安置房",
          label: "安置房",
        },
        {
          value: "公寓",
          label: "公寓",
        },
        {
          value: "自建房",
          label: "自建房",
        },
        {
          value: "其它",
          label: "其它",
        },
      ],
      value: "",
      input1: "",
      input2: "",
      radio1: "",
      c1: "",
      c2: "",
      c3: "",
      // show:true
    };
  },

  methods: {
    ...mapMutations(["amend"]),
    open1() {
      // 判断输入框架是否为空
      if (
        this.value == "" ||
        this.input1 == "" ||
        this.input2 == "" ||
        this.radio1 == ""
      ) {
        Toast.fail("请完整输入");
        return;
      } else {
        this.$notify({
          title: "成功",
          message: "创建房源成功",
          type: "success",
        });
        // 自定义加载图标
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        // 转换成省份 城市
        this.c1 = CodeToText[this.selectedOptions[0]];
        this.c2 = CodeToText[this.selectedOptions[1]];
        this.c3 = CodeToText[this.selectedOptions[2]];
        // 把房源的信息 归为一个对象
        let h = {};
        h.v = this.value;
        h.inp1 = this.input1;
        h.inp2 = this.input2;
        h.r = this.radio1;
        h.c1 = this.c1;
        h.c2 = this.c2;
        h.c3 = this.c3;
        h.id = 1;

        // 把房源信息 通过vuex保存
        this.amend(h);
        this.$router.push({ name: "tt" });
      }
    },
    handleChange(value) {
      let data =
        CodeToText[value[0]] +
        ", " +
        CodeToText[value[1]] +
        ", " +
        CodeToText[value[2]];
    },
    back() {
      this.$router.go(-1);
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
#app {
  background-color: #f0f0f0;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  font-size: 16px;
  .add {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;

    .back {
      position: absolute;
      left: 10px;
      top: 13px;
      img {
        width: 20px;
      }
    }
  }
  .mask {
    button {
      width: 90%;
      height: 40px;
      margin-left: 5%;
      color: white;
      background-color: #5477ef;
      border: 0;
      border-radius: 5px;
      margin-top: 50px;
    }
    span {
      color: red;
    }
  }

  #one {
    width: 30px;
    float: right;
    font-size: 30px;
  }
  ul {
    li {
      list-style: none;
      margin-top: 15px;
      margin-left: 30px;
    }
  }
  .el-input {
    width: 60%;
  }
}
</style>